博客头像虚化[Hexo]

1，效果

找到博客主题下的aside.style, 529行替换代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
if hexo-config('aside.enable')
  #aside-content
    >.card-widget.card-info
      position: relative;
      padding: 0;
      overflow: hidden; // 确保伪元素的模糊效果不会溢出
      +maxWidth768()
        display: none;
      > .card-content
        padding: 1rem 1.2rem;
        min-height: 320px;
        position: relative;
        z-index: 1; // 确保内容在伪元素之上
        backdrop-filter: blur(5px); // 内容区域模糊
        background-color: rgba(255, 255, 255, 0.3); // 半透明背景色
      &::before
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(https://img.wjwj.top/2025/01/21/5e54e54be63cf31850a4330a66ca9e17.jpg) center/cover no-repeat;
        filter: blur(1px); // 背景模糊
        z-index: 0; // 确保伪元素在内容之下
      &::after
        content: if hexo-config('aside.enable')
  #aside-content
    >.card-widget.card-info
      position: relative;
      padding: 0;
      overflow: hidden; // 确保伪元素的模糊效果不会溢出
      +maxWidth768()
        display: none;
      > .card-content
        padding: 1rem 1.2rem;
        min-height: 320px;
        position: relative;
        z-index: 1; // 确保内容在伪元素之上
        backdrop-filter: blur(5px); // 内容区域模糊
        background-color: rgba(255, 255, 255, 0.3); // 半透明背景色
      &::before
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(https://img.wjwj.top/2025/01/21/5e54e54be63cf31850a4330a66ca9e17.jpg) center/cover no-repeat;
        filter: blur(1px); // 背景模糊
        z-index: 0; // 确保伪元素在内容之下
      &::after
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(-25deg, var(--anzhiyu-main), var(--anzhiyu-main-op-deep), var(--anzhiyu-main), var(--anzhiyu-main-op-deep));
        background-size: 400%;
        opacity: 0.1; // 渐变背景透明度
        z-index: 0; // 确保伪元素在内容之下
        animation: gradient 15s ease infinite;
    .card-info
      &:hover 
        .author-info-avatar
          opacity: 0;
          transform: scale(0);
        .author-info__description
          opacity: 1;
        .author-status
          opacity: 0;
          transform: scale(0);

其中background的链接替换自己的url链接

2，头像抠图

头像内虚化需要将头像进行抠图，再配置到config.anzhiyu.yml

Avatar (头像)

avatar:
img: https://img.wjwj.top/2025/02/15/06acb98b7bc6e731881bc2bef0e043cf.png
effect: false

实际效果按照自己喜好调整，就酱